<template>
  <div>
    <div class="content-item">
      <el-form :inline="true"
               :model="formData"
               :rules="rules"
               ref="form"
               class="form-inline"
               size="small">
        <el-form-item label="工作项名称："
                      prop="name">
          <el-input v-model.trim="formData.name"
                    style="width: 250px;"
                    placeholder="输入检查工作项名称"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="工作项类型："
                      prop="checkType">
          <el-select v-model="formData.checkType"
                     size="small"
                     style="width: 250px;"
                     placeholder="--工作项类型--">
            <el-option v-for="item in checkType"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="开始日期："
                      prop="startAt">
          <el-date-picker v-model="formData.startAt"
                          :disabled="editable && cloneData.status !== 1"
                          size="small"
                          :picker-options="startAt"
                          style="width: 250px;"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="选择开始执行的日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期："
                      prop="endAt">
          <el-date-picker v-model="formData.endAt"
                          size="small"
                          :picker-options="endAt"
                          style="width: 250px;"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="选择结束日期">
          </el-date-picker>
        </el-form-item>
        <br />
        <el-form-item label="工作项备注："
                      prop="remark">
          <el-input v-model.trim="formData.remark"
                    style="width: 620px;"
                    :rows="6"
                    type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div class="g-mt20">
        <el-button size="small"
                   @click="$router.go(-1)">返回</el-button>
        <el-button size="small"
                   type="primary"
                   @click="submit">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import { config } from '@/tools/mixin'
import { addCheckWorkUsingPOST, modifyCheckWorkUsingPUT } from '@api/auto'
export default {
  name: '',
  props: {
  },
  mixins: [config],
  components: {},
  data () {
    return {
      cloneData: {},
      startAt: {
        disabledDate: time => {
          if (this.formData.endAt) {
            return (
              (time.getTime() > new Date(this.formData.endAt).getTime() - 24 * 60 * 60 * 1000) || (time.getTime() < Date.now() - 24 * 60 * 60 * 1000)
            )
          } else {
            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
          }
        }
      },
      endAt: {
        disabledDate: time => {
          if (this.formData.startAt) {
            return (
              (time.getTime() < new Date(this.formData.startAt).getTime() - 24 * 60 * 60 * 1000) || (time.getTime() < Date.now() - 24 * 60 * 60 * 1000)
            )
          } else {
            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
          }
        }
      },
      formData: {
        checkType: '',
        name: '',
        startAt: '',
        endAt: '',
        remark: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入工作项名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在1到20个字符', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入工作项备注', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在1到200个字符', trigger: 'blur' }
        ],
        checkType: [
          { required: true, message: '请选择工作项类型', trigger: 'blur' }
        ],
        startAt: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        endAt: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ]
      },
      editable: false
    }
  },
  created () {
    this.$route.query.type === 'edit' ? this.editable = true : this.editable = false
    if (this.editable) {
      this.formBackfill()
    }
  },
  mounted () { },
  methods: {
    submit () {
      let that = this
      this.$refs.form.validate(valid => {
        if (valid) {
          if (that.editable) {
            modifyCheckWorkUsingPUT(this.formData)
              .then(() => {
                this.$message.success('修改成功！')
                this.$router.go(-1)
              })
          } else {
            addCheckWorkUsingPOST(this.formData)
              .then(() => {
                this.$message.success('操作成功！')
                this.$router.go(-1)
              })
          }
        }
      })
    },
    // 编辑回填表单
    formBackfill () {
      let temp = JSON.parse(sessionStorage.wordDetail)
      this.cloneData = temp
      this.formData.checkType = temp.checkType
      this.formData.name = temp.name
      this.formData.id = temp.id
      this.formData.remark = temp.remark
      this.formData.startAt = moment(temp.startAt).format('YYYY-MM-DD')
      this.formData.endAt = moment(temp.endAt).format('YYYY-MM-DD')
    }
  }
}
</script>
<style lang='less' scoped>
</style>
<style>
.form-inline .el-form-item__label {
  width: 106px;
  text-align: left;
}
</style>
